import { Fragment, ReactNode, Component } from "react"
import { Button, Space, Table } from 'antd'
import TeamInfoApi from '../../api/team_info'
import Modif from "../../components/Modif"

export interface IAdmin {
    Id : number
    name : string
    message : string
    role : string
}
interface IState {
    loading: boolean,
    adminList: IAdmin[],
    current: number,
    hideOnSinglePage: boolean,
    size: number,
    total: number,
    whetherShowModif : boolean,
    choseid : number,
}

const dataSource = [
    {
        Id : 1,
        Message: '信息',
        Name: '姓名',
        Role: "角色"
    },
    {
        Id : 2,
        key: '2',
        name: '胡彦2祖',
        age: 42,
        address: '西湖区湖底公园1号',
    },
];



export default class TeamInfoList extends Component<any, IState>  {
    columns = [
        {
            title: 'Id',
            dataIndex: 'Id',
            key: 'Id',
            show : true,
        },
        {
            title: '信息',
            dataIndex: 'Message',
            key: 'Message',
            show : true,
        },
        {
            title: '姓名',
            dataIndex: 'Name',
            key: 'Name',
            show : true,
        },
        {
            title: '角色',
            dataIndex: 'Role',
            key: 'Role',
            show : true,
        },
        {
            title: '操作',
            dataIndex: 'actions',
            key: 'actions',
            show : false,
            render:  (text:any,data :any) => (
                <div>
                    <Button type="primary" onClick={this.clickEdit.bind(this,data)}>修改</Button>
                    <Button type="ghost" style={{marginLeft:"5px"}}>删除</Button>
                </div>
              ),
    
        }
    ];
    constructor(props: any, context: any) {
        super(props, context)
        this.state = {
            loading: false,
            adminList: [],
            current: 1,
            hideOnSinglePage: true,
            size: 10,
            total: 0,
            whetherShowModif: false,
            choseid: 0,
        }
    }
    // 获取数据列表 
    getdatalist = ()=>{
        TeamInfoApi.getList().then(res =>{
            this.setState({
                adminList : res.data
            })
        })
    }
    // 修改页数
    change = (pagination: any) => {
    
        console.log("改变")
    }
    componentDidMount() {
        this.getdatalist()
    }

    // 添加按钮
    add = (pagination: any) => {

        this.setState((prevState, props) => ({
            whetherShowModif: !this.state.whetherShowModif,
            choseid : 0
        }))
    }
    // 点击修改按钮
    clickEdit = (admin : IAdmin) => {
        console.log(admin)
        this.setState({
            choseid: admin.Id
        })
        this.setState((prevState, props) => ({
            whetherShowModif: !this.state.whetherShowModif
        }))
        console.log(this.state.whetherShowModif)
    }
    shouldComponentUpdate(){
        return true
    }
      // 隐藏添加管理员
    hiddenAddAdmin = (reflash?: boolean) => {
        this.setState({ whetherShowModif: !this.state.whetherShowModif })
    }
     render() {
        return (
            <div>
                 <Button type="primary" onClick={this.add}>添加</Button>
                 <Modif
                    visible={this.state.whetherShowModif} 
                    callback={this.hiddenAddAdmin}
                    formFileds = {this.columns}
                    choseid = {this.state.choseid}
        
                
                    ></Modif>
                <Table
                    dataSource={this.state.adminList}
                    pagination={{
                        position: ['bottomCenter'],
                        total: this.state.total,
                        pageSize: this.state.size,
                        showSizeChanger: false,
                    }}
                    columns={this.columns}
                    rowKey={'Id'}
                    // onChange={this.change}
                />;
            </div>
        )
    }
}
